<template>
	<div id="news">
		<nav-tab activeColor="#FFFFFF">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="fanhui">
					<van-icon name="arrow-left" size="25px" color="#0069E4" />
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 17px;color: black;">付款码</div>
				</div>
				<div class="header-nav3" slot="header-xingx">
					<van-icon name="more-o" size="25px" color="#BBBBBB" />
				</div>
			</header-item>
		</nav-tab>
		<div class="context">
			<div class="payment-tis">仅限当面向商家付款使用，勿泄露给他人</div>
		    <div class="fukuanma">
				<div class="ms-img"><img src="../../assets/image/scan/ms1.png" /></div>
			    <div>6255 4438 8614 8176341</div>
				<div class="mas-img"><img src="../../assets/image/scan/mas.png"/></div>
			   <div class="fuk-footer">
				   <div class="nima">招商银行(尾号4444)-信用卡</div>
				   <span>更换</span>
			   </div>
			</div>
		</div>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import {
		Icon,
		Cell,
		CellGroup,
		Button
	} from 'vant';
	export default {
		methods: {
			fanhui() {
				this.$router.go(-1)
			},
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Button.name]: Button,
		}
	}
</script>

<style scoped lang="less">
	#news {
		width: 100vw;
		height: 100%;
		position: fixed;
		background-color: rgb(240, 240, 240);
	}

	.context {
		margin-top: 60px;
		margin-bottom: 10px;
		.payment-tis{
			font-size: 15px;
			color: #949494;
			text-align: center;
			
		}
		.fukuanma{
			width: 341px;
			height: 364px;
			background-color: white;
			margin: 15px auto;
			padding-top: 20px;
			text-align: center;
			font-size: 16px;
			color: #111111;
			box-sizing: border-box;
			box-shadow: 0px 0px  5px rgba(0,0,0,0.2);
			.ms-img{
				width: 299px;
				height: 100px;
				margin: 0 auto;
			    margin-bottom: 12px;
			
				img{
					width: 100%;
					height: 100%;
				}
			}
		.mas-img{
			width: 137px;
			height: 137px;
			margin: 0 auto;
			padding-top:10px;
			img{
				width: 100%;
				height: 100%;
			}
		}
			.fuk-footer{
				height: 50px;
				background-color:#0067E4;
				margin-top:16px;
				z-index: 999;
				display: flex;
				align-items: center;
				justify-content: center;
				.nima{
					font-size: 15px;
					color: #6FD2FF;
					padding-right: 15px;
					position: relative;
				
				}
				.nima::after{
				   content: "";
					width: 1px;
					height: 15px;
					background-color:#72C7FA;
					display: inline-block;
					position: absolute;
	                right: 6px;
					top: 4px;
					
				 
				}
				
				span{
					font-size: 15px;
					color: #C9E7E8;
				}
			}
		}
		
	}

	
</style>
